<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用document对象操作页面</title>
    <style type="text/css">
        body,input,div,p,{margin: 0;padding: 0;}
        body{font-size: 14px; font-family: "微软雅黑"; line-height: 25px;}
        .content{width: 550px; margin: 0 auto;}
        .content img{ float: left; width: 150px;}
        .r{float: left; width: 400px;}
        input[name="changeBook"]{
            width: 100px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 14px; font-family: "微软雅黑";
            margin: 10px 0 10px 0;
        }
        input[name="season"]{
            width: 50px; text-align: center;
        }
    </style>
</head>
<body>
<div class="content">
    <img src="images/book.jpg" alt="岛上书店"/>
    <div class="r">
		
        <div id="book">书名：岛上书店</div>
		<div id="book">书名：海里书店</div>
        <input name="changeBook" value="换换名称" onclick="changeName()" type="button"  /><br>
        四季名称：
        <input name="season" type="text" value="春" />
        <input name="season" type="text" value="夏" />
        <input name="season" type="text" value="秋" />
        <input name="season" type="text" value="冬" /><br><br>
        <input name="b2" type="button" value="input内容"  />
        <input name="b3" type="button" onclick="getSeason()" value="四季名称"  />
        <input name="b4" type="button" value="清空页面内容"  />
        <p id="replace"></p>
    </div>
</div>
<script  type="text/javascript">
    function changeName(){
		// 拿到第一个id值为book的DOM对象。返回的DOM永远是一个
		var bookDom = document.getElementById("book");
		// 控制台输出，验证
		console.log(bookDom);
		bookDom.innerHTML = "畅销书";
	}
	function getSeason(){
		// 根据name属性获取dom，返回的是数组类型
		var seasonDomArray = document.getElementsByName("season");
		var seasonContext = "";
		console.log(seasonDomArray);
		for(var i=0;i<seasonDomArray.length; i++){
			seasonContext = seasonContext + seasonDomArray[i].value;
		}
		console.log(seasonContext);
		document.getElementById("replace").innerHTML = seasonContext;
	}
</script>
</body>
</html>